<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="news-container">
    <div class="news-header">
      <h1>民宿资讯</h1>
      <p>了解最新民宿动态和旅游攻略</p>
    </div>

    <!-- 资讯列表 -->
    <div class="news-list">
      <el-row :gutter="20">
        <el-col 
          v-for="news in displayedNews" 
          :key="news.id" 
          :xs="24" 
          :sm="12" 
          :md="8"
        >
          <el-card class="news-card" shadow="hover" @click="navigateToDetail(news.id)">
            <div class="news-image">
              <img :src="news.img" :alt="news.title">
            </div>
            <div class="news-info">
              <h3 class="news-title">{{ news.title }}</h3>
              <p class="news-summary">{{ news.summary }}</p>
              <div class="news-meta">
                <span class="news-views">
                  <i class="el-icon-view"></i>
                  {{ news.time }} 
                </span>
                <span class="news-views">
                  <i class="el-icon-view"></i>
                  {{ news.viewCount }} 阅读
                </span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 分页 -->
      <div class="pagination-section" v-if="total > 0">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[6, 12, 18, 24]"
          :total="total"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import request from '@/utils/request'

const router = useRouter()
const currentPage = ref(1)
const pageSize = ref(6)
const total = ref(0)
const loading = ref(false)

// 获取资讯列表
const fetchNews = async () => {
  loading.value = true
  try {
    const params = {
      page: currentPage.value,
      pageSize: pageSize.value
    }
    
    const res = await request.get('/homestayNews/page', { params })
    if (res.data.code === '200') {
      displayedNews.value = res.data.data.records || []
      total.value = res.data.data.total || 0
    }
  } catch (error) {
    console.error('获取资讯列表失败:', error)
  } finally {
    loading.value = false
  }
}



// 跳转到详情页
const navigateToDetail = (id) => {
  router.push(`/news/${id}`)
}

// 分页处理
const handleSizeChange = (size) => {
  pageSize.value = size
  fetchNews()
}

const handlePageChange = (page) => {
  currentPage.value = page
  fetchNews()
  window.scrollTo(0, 0)
}
// const formatDate = (timeArray) => {
//   if (!timeArray || timeArray.length !== 6) return '';

//   const [year, month, day, hour, minute] = timeArray;

//   // 手动拼接字符串，确保格式为 "YYYY-M-D HH:MM"
//   return `${year}-${month}-${day} ${hour}:${minute}`;
// };
// 计算当前显示的资讯列表
const displayedNews = ref([])

onMounted(() => {
  fetchNews()
})
</script>

<style scoped>
.news-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.news-header {
  text-align: center;
  margin-bottom: 3rem;
}

.news-header h1 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 1rem;
}

.news-header p {
  color: #666;
  font-size: 1.1rem;
}

.news-card {
  margin-bottom: 2rem;
  cursor: pointer;
  transition: transform 0.3s;
}

.news-card:hover {
  transform: translateY(-5px); /* 添加鼠标悬停时的动画效果 */
}

.news-image {
  height: 200px;
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-info {
  padding: 1rem;
}

.news-title {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-summary {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 0.8rem;
}

.news-time, .news-views {
  display: flex;
  align-items: center; /* 垂直居中 */
  gap: 4px;             /* 间距 */
}

.pagination-section {
  margin-top: 2rem;
  text-align: center; /* 居中对齐 */
}
</style> 